﻿var vm = new Vue({
    el: '#app'
    , data: {
        isDrag: false
        , dragTarget: null
        , copyTarget: null
    }
    , mounted: function () {
        document.body.addEventListener('mousemove', this.mouseMove, true);
        document.body.addEventListener('mouseup', this.mouseUp, true);
    }
    , methods: {
        /**
         * 鼠标按下，开始拖曳
         * */
        mouseDown: function (event) {
            console.log(event);
            this.isDrag = true;
            this.dragTarget = event.target;
            this.copyTarget = this.dragTarget.cloneNode(true)
            this.copyTarget.style.position = "absolute";
            this.copyTarget.style.left = event.clientX + 10 + 'px';
            this.copyTarget.style.top = event.clientY + 10 + 'px';
            document.body.appendChild(this.copyTarget);
        }

        /**
         * 鼠标松开，结束拖曳
         * */
        , mouseUp: function (event) {
            if (this.isDrag) {
                this.isDrag = false;
                document.body.removeChild(this.copyTarget);
                this.copyTarget = null;
            }
        }

        /**
         * 鼠标在目标上松开后，的操作
         * */
        , contentMouseUpHandle: function (event) {
            if (this.copyTarget) {
                event.target.appendChild(this.copyTarget.cloneNode(true));
            }
        }

        /**
         * 鼠标移动
         * */
        , mouseMove: function (event) {
            if (this.isDrag) {
                this.copyTarget.style.left = event.clientX + 'px';
                this.copyTarget.style.top = event.clientY + 'px';
            }
        }
    }
});